import { createLogUploadTask } from '@/services/intelligentDrivingLog/intelligentDrivingLogList';
import { formItemLayout } from '@/support/constant/common';
import { LogUploadTaskParams } from '@/types/intelligentDrivingLog/intelligentDrivingLogList.d';
import { DatePicker, Form, Input, message, Modal, Select } from 'antd';
import dayjs from 'dayjs';
import { Moment } from 'moment';
import React, { useState } from 'react';

interface IProps {
  open: boolean;
  onClose: (options?: { isRefresh: boolean }) => void;
  logTypeOptions: any[];
}
const { RangePicker } = DatePicker;

export default (props: IProps) => {
  const { open, onClose, logTypeOptions } = props;
  const [dates, setDates] = useState<any>(null);

  const [form] = Form.useForm<{
    vin: LogUploadTaskParams['vin'];
    logType: LogUploadTaskParams['logType'];
    date: [LogUploadTaskParams['startDate'], LogUploadTaskParams['endDate']];
  }>();

  const disabledDate = (current: Moment) => {
    if (!dates) {
      return false;
    }
    const tooLate = dates[0] && current.diff(dates[0], 'days') > 30;
    const tooEarly = dates[1] && dates[1].diff(current, 'days') > 30;
    return !!tooEarly || !!tooLate;
  };

  const onOpenChange = (open: boolean) => {
    if (open) {
      setDates([null, null]);
    } else {
      setDates(null);
    }
  };

  const onCancel = () => {
    form.resetFields();
    onClose();
  };

  const onSubmit = async () => {
    let values = await form.validateFields();
    let { vin, logType, date } = values;
    let params: LogUploadTaskParams = {
      vin,
      logType,
      startDate: dayjs(date[0]).format('YYYY-MM-DD HH:mm'),
      endDate: dayjs(date[1]).format('YYYY-MM-DD HH:mm'),
    };

    let result = await createLogUploadTask(params);
    if (result.statusCode === '0') {
      message.success('操作成功');
      form.resetFields();
      onClose({ isRefresh: true });
    }
  };

  return (
    <Modal
      open={open}
      title="获取日志"
      width={600}
      onCancel={onCancel}
      okText="提交"
      onOk={onSubmit}
    >
      <Form form={form} {...formItemLayout} layout="horizontal">
        <Form.Item
          label="VIN"
          name="vin"
          rules={[
            {
              required: true,
              message: '请输入VIN',
            },
          ]}
        >
          <Input placeholder="请输入VIN" allowClear />
        </Form.Item>
        <Form.Item
          label="日志类别"
          name="logType"
          rules={[
            {
              required: true,
              message: '请选择日志类别',
            },
          ]}
        >
          <Select
            mode="multiple"
            placeholder="请选择日志类别"
            options={logTypeOptions}
            allowClear
          />
        </Form.Item>
        <Form.Item
          label="时间段"
          name="date"
          rules={[
            {
              required: true,
              message: '请选择时间段',
            },
          ]}
        >
          <RangePicker
            showTime={{ format: 'HH:mm' }}
            format="YYYY-MM-DD HH:mm"
            disabledDate={disabledDate}
            onCalendarChange={val => setDates(val)}
            onOpenChange={onOpenChange}
          />
        </Form.Item>
      </Form>
    </Modal>
  );
};
